<template>
  <div class="min-h-screen bg-gray-50 p-4">
    <div class="max-w-md mx-auto bg-white rounded-lg shadow-sm overflow-hidden">
      <!-- 头部 -->
      <div class="bg-green-500 text-white p-4">
        <h1 class="text-lg font-semibold text-center">功能菜单</h1>
      </div>

      <!-- 全部统计 -->
      <div class="flex items-center justify-between p-4 border-b bg-gray-50">
        <span class="text-gray-600 font-medium">全部</span>
        <span class="bg-gray-200 text-gray-600 px-2 py-1 rounded-full text-sm">
          {{ totalCount }}
        </span>
      </div>

      <!-- 菜单列表 -->
      <div class="divide-y divide-gray-100">
        <div v-for="(section, index) in menuData" :key="index" class="bg-white">
          <!-- 分类标题 -->
          <div
            class="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50 transition-colors"
            @click="toggleSection(section.title)"
          >
            <div class="flex items-center space-x-3">
              <ChevronDown v-if="expandedSections.has(section.title)" class="w-4 h-4 text-gray-400" />
              <ChevronRight v-else class="w-4 h-4 text-gray-400" />
              <div class="text-green-500">
                <component :is="section.icon" class="w-4 h-4" />
              </div>
              <span class="font-medium text-gray-800">{{ section.title }}</span>
            </div>
            <span class="bg-green-100 text-green-600 px-2 py-1 rounded-full text-sm">
              {{ section.count }}
            </span>
          </div>

          <!-- 子菜单 -->
          <div v-if="expandedSections.has(section.title)" class="bg-gray-50">
            <div
              v-for="(item, itemIndex) in section.items"
              :key="itemIndex"
              class="flex items-center p-4 pl-12 cursor-pointer hover:bg-gray-100 transition-colors border-t border-gray-200"
              @click="handleItemClick(item)"
            >
              <div class="w-2 h-2 bg-gray-300 rounded-full mr-3"></div>
              <span class="text-gray-700 flex-1">{{ item }}</span>
              <ChevronRight class="w-4 h-4 text-gray-400" />
            </div>
          </div>
        </div>
      </div>

      <!-- 底部提示 -->
      <div class="p-4 text-center text-gray-500 text-sm bg-gray-50">
        点击功能项进入对应页面
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ChevronDown, ChevronRight, User, GraduationCap, School, Monitor } from 'lucide-vue-next';

const router = useRouter();

// 使用ref代替useState来管理展开的部分
const expandedSections = ref(new Set(['H5辅导员端']));

// 菜单数据
const menuData = [
  {
    title: 'H5辅导员端',
    count: 4,
    icon: User,
    items: [
      '辅导员角色确认',
      '更多功能-上报记录',
      '更多功能-角色切换',
      '更多功能-免上报登记'
    ]
  },
  {
    title: 'H5学院端',
    count: 5,
    icon: GraduationCap,
    items: [
      '学院角色确认',
      '更多功能-辅导员上报记录',
      '更多功能-学院确认记录',
      '更多功能-角色切换',
      '更多功能-免上报登记'
    ]
  },
  {
    title: 'H5学校端',
    count: 6,
    icon: School,
    items: [
      '学校角色查询',
      '更多功能-学院确认记录',
      '更多功能-全校上报记录',
      '更多功能-角色切换',
      '更多功能-免上报登记',
      '更多功能-上报时间'
    ]
  },
  {
    title: 'PC学校端',
    count: 1,
    icon: Monitor,
    items: [
      '成员管理'
    ]
  }
];

// 计算总数
const totalCount = computed(() => {
  return menuData.reduce((total, section) => total + section.count, 0);
});

// 切换展开/收起部分
const toggleSection = (sectionTitle) => {
  const newExpanded = new Set(expandedSections.value);
  if (newExpanded.has(sectionTitle)) {
    newExpanded.delete(sectionTitle);
  } else {
    newExpanded.add(sectionTitle);
  }
  expandedSections.value = newExpanded;
};

// 处理点击菜单项
const handleItemClick = (item) => {
  console.log('点击了:', item);
  
  // 根据菜单项跳转到对应页面
  if (item === '辅导员角色确认') {
    router.push('/counselor/role-confirm');
  } else if (item === '更多功能-上报记录') {
    router.push('/counselor/report-records');
  } else if (item === '更多功能-角色切换') {
    router.push('/counselor/role-switch');
  } else if (item === '更多功能-免上报登记') {
    router.push('/counselor/exempt-report');
  } else if (item === '学院角色确认') {
    router.push('/college/role-confirm');
  } else if (item === '学校角色查询') {
    router.push('/school/role-query');
  } else if (item === '成员管理') {
    router.push('/pc/member-management');
  } else {
    // 其他菜单项暂未实现，显示开发中提示
    alert('该功能正在开发中，敬请期待！');
  }
};
</script>